<script setup>
import { inject, onMounted, ref, toRaw } from "vue";
//图标
import { IconArrowLeft } from '../icon/index.js'
import DlLoading from '../components/DlLoading.vue'
import { DlMessageBox } from '../util/messagebox.js';
import StarBox from '../components/StarBox.vue'

//引入 api
import { findUserOneOrderFun } from '../api/order.js'
import { addCommentFun } from '../api/comment.js'

//主菜单核心
const menuCore = inject('menuCore');
//返回
function doGoBack() {
    menuCore.back();
}

//评价-对象
const commentObj = ref({orderId: null, list: []});
const loading = ref(false);
const canComment = ref(true);//是否可评价
function doLoadData() {
    if(orderId !== null) {//存在订单
        loading.value = true;
        commentObj.value = {orderId: null, list: []};
        //获取对应订单信息
        let params = {
            orderId: orderId
        };
        console.log('params:', params);

        if (window && window.enableDl) {
            //模拟
            setTimeout(()=>{
                let order = {
                    id: orderId, no: 'xxxxxxxxxxxxxxxxxxxxxx1', totalPrice: '229.95', totalNum: 5, status: 4, details: [
                        {id: 11, productId:1, title:'测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11测试商品11', image:'./product.jpg', price:99.99, num:2, type:'xxx'},
                        {id: 12, productId:2, title:'测试商品22', image:'./product.jpg', price:9.99, num:3, type:'sss'},
                    ], name:'汤姆', phone:'12345678901', addr: '江苏南京江北新区XXX社区XX路NN号SSSS',
                };

                //订单状态需要为 4 待评价
                if(order.status !== 4) {
                    //DlMessageBox.warning('该订单已评价');
                    canComment.value = false;//不可评价
                    loading.value = false;
                    return;
                }

                //成功后执行以下操作
                commentObj.value.orderId = order.id;
                for(let d of order.details) {
                    commentObj.value.list.push({
                        productId: d.productId,
                        title: d.title,
                        type: d.type,
                        image: d.image,
                        star: 0,//评分(1-5星)
                        content: '',//内容
                    });
                }
                loading.value = false;
            }, 1000);
        } else {
            //请求api
            findUserOneOrderFun(params.orderId).then((result)=>{
                console.log('findUserOneOrderFun result:', result);
                if (result.code == 200) {
                    DlMessageBox.success(result.msg);
                    let order = result.data;

                    //订单状态需要为 4 待评价
                    if(order.status !== 4) {
                        //DlMessageBox.warning('该订单已评价');
                        canComment.value = false;//不可评价
                        loading.value = false;
                        return;
                    }

                    //成功后执行以下操作
                    commentObj.value.orderId = order.id;
                    for(let d of order.details) {
                        commentObj.value.list.push({
                            productId: d.productId,
                            title: d.title,
                            type: d.type,
                            image: d.image,
                            star: 0,//评分(1-5星)
                            content: '',//内容
                        });
                    }
                } else {
                    DlMessageBox.error(result.msg);
                    canComment.value = false;//不可评价
                }
                loading.value = false;
            });
        }
    }
}

//评价
function doOrderComment() {
    //对订单中商品进行评价
    let params = {orderId: commentObj.value.orderId, list: []};
    for(let d of commentObj.value.list) {
        if(d.star < 1) {
            DlMessageBox.warning('请选择评分');
            return;
        }
        params.list.push({productId: d.productId, type: d.type, star: d.star, content: d.content});
    }
    console.log('params:', params);

    if (window && window.enableDl) {
        //模拟
        //成功后执行以下操作
        DlMessageBox.success('评价成功');
        menuCore.push('/order');
    } else {
        //请求api
        addCommentFun(params).then((result)=>{
            console.log('result:', result);
            if (result.code == 200) {
                DlMessageBox.success(result.msg);
                //menuCore.push('/order');
            } else {
                DlMessageBox.error(result.msg);
            }
        });
    }    
}

//当前订单id
let orderId = null;
onMounted(()=>{
    let id = parseInt(localStorage.getItem('orderId'));
    if(!isNaN(id)) {
        orderId = id;
    }

    doLoadData();
});

</script>
<template>
    <div class="view-dl">
        <div class="top-head-dl">
            <IconArrowLeft class="back-icon" @click="doGoBack" />
            <div class="title-dl">评价</div>
        </div>

        <div class="view-body-dl" v-show="!canComment">
            <div class="tip-dl">该订单已评价, 请返回!</div>
        </div>
        <div class="view-body-dl" v-show="!loading && canComment" >
            <div class="comment-list-dl">
                <div class="comment-box-dl" v-for="d in commentObj.list" :key="d.productId">
                    <div class="comment-label-dl">商品:</div>
                    <div class="product-dl">
                        <div class="img-dl">
                            <img :src="d.image" alt="no image">
                        </div>
                        <div class="title-dl">{{d.title}}</div>
                    </div>
                    <div class="comment-label-dl">评分: {{d.star}}</div>
                    <StarBox class="stars-dl" :count="d.star" @change-count="(c)=>{d.star=c}" :checked="true" />
                    <div class="comment-label-dl">评价内容: </div>
                    <textarea class="comment-area-dl" v-model="d.content" draggable></textarea>
                </div>
            </div>


            <div class="btn-list-dl" >
                <div class="comment-btn-dl" @click="doOrderComment" >评价</div>
            </div>
        </div>

        <div class="load-box-dl" v-show="loading" >
            <DlLoading style="font-size: 1rem" />
        </div>
    </div>
</template>
<style scoped>
.view-dl {
    font-size: 0.4rem;
    height: 100%;
    overflow: hidden auto;
}
.top-head-dl {
    background-color: #fff;
    color: #333;
    padding: 0.2rem;
    position: sticky;
    top: 0;
    z-index: 2;
}
.top-head-dl .back-icon {
    width: 0.8rem;
    height: 0.8rem;
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 0.2rem;
    transform: translate(0, -50%);
}
.top-head-dl .title-dl {
    font-size: 0.7rem;
    text-align: center;
}

.view-body-dl {
    padding: 0.2rem;
}

.view-body-dl .tip-dl {
    font-size: 0.6rem;
    font-weight: bold;
    color: #900;
    text-align: center;
}

.comment-list-dl {
    color: #333;
}
.comment-box-dl {
    background-color: #fff;
    border-radius: 0.2rem;
    margin-bottom: 0.2rem;
    padding: 0.2rem;
}
.comment-label-dl {
    margin-bottom: 0.2rem;
    font-size: 0.36rem;
}
.product-dl {
    display: flex;
    margin-bottom: 0.2rem;
}
.product-dl .img-dl {
    width: 1.68rem;
    height: 1.68rem;
    flex-shrink: 0;
}
.img-dl img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    font-size: 0.32rem;
    display: block;
}
.product-dl .title-dl {
    margin-left: 0.2rem;
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    /* white-space: nowrap; */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.stars-dl {
    margin-bottom: 0.2rem;
    font-size: 0.6rem;
}

.comment-area-dl {
    width: 100%;
    box-sizing: border-box;
    height: 1.8rem;
    font-size: 0.4rem;
    padding: 0.1rem 0.2rem;
    resize: none;
    border-color: #ccc;
    border-radius: 0.1rem;
}

.btn-list-dl {
    text-align: center;
    margin: 0.2rem;
}
.comment-btn-dl {
    font-size: 0.6rem;
    color: #fff;
    background-color: #900000;
    padding: 0.1rem 0.8rem;
    border-radius: 0.6rem;
    display: inline-block;
    cursor: pointer;
    user-select: none;
}

.load-box-dl {
    text-align: center;
    color: #aaa;
    margin: 0.2rem;
}
.load-box-dl .no-more-data-dl {
    font-size: 0.4rem;
    border-top: 1px solid #ccc;
    padding-top: 0.2rem;
}

</style>